{extend name="./view/base/admin.html"}
{block name="body"}
<div class="card">
    <div class="card-body">
        <form @submit.prevent="submit">
            <div class="form-group">
                <label>所属分类</label>
                <select v-model="form.cate_id" class="form-control">
                    <option value="">请选择分类</option>
                    <option v-for="v in cate_list" :value="v.id" v-text="v.name"></option>
                </select>
            </div>
            <div class="form-group">
                <label>配置名称</label>
                <input class="form-control" type="text" v-model="form.name">
            </div>
            <div class="form-group">
                <label>标识</label>
                <input class="form-control" type="text" v-model="form.key">
            </div>
            <div class="form-group">
                <label>表单类型</label>
                <select v-model="form.type" class="form-control">
                    <option value="text">text</option>
                    <option value="textarea">textarea</option>
                    <option value="ueditor">ueditor</option>
                    <option value="radio">radio</option>
                    <option value="checkbox">checkbox</option>
                    <option value="image">image</option>
                    <option value="select">select</option>
                </select>
            </div>
            <div class="form-group" v-if="['radio','checkbox','select'].indexOf(form.type)!=-1">
                <label>配置参数</label>
                <ul class="list-group">
                    <li class="list-group-item" v-for="(v,k) in form.options">
                        <div class="form-row align-items-center">
                            <div class="col-auto">
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">
                                            键
                                        </span>
                                    </div>
                                    <input type="text" class="form-control" v-model="v.key">
                                </div>
                            </div>
                            <div class="col-auto">
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">
                                            值
                                        </span>
                                    </div>
                                    <input type="text" class="form-control" v-model="v.name">
                                </div>
                            </div>
                            <div class="col-auto">
                                <button type="button" v-show="k==0" @click="options_add"
                                    class="btn btn-yellow">添加一项</button>
                                <button type="button" v-show="k>0" @click="options_del(k)"
                                    class="btn btn-pink">删除此项</button>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="form-group">
                <label>排序</label>
                <input class="form-control" type="number" v-model="form.sort">
            </div>
            <div class="form-group">
                <label>备注</label>
                <input class="form-control" type="text" v-model="form.desc">
            </div>
            <div class="form-group">
                <label>状态</label><br>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" v-model="form.status" id="status" value="1" />
                    <label class="form-check-label" for="status">启用</label>
                </div>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" v-model="form.status" id="status-1" value="-1" />
                    <label class="form-check-label" for="status-1">停用</label>
                </div>
            </div>
            <button class="btn btn-sm btn-info" type="submit">提交</button>
        </form>
    </div>
</div>
{/block}
{block name="script"}
<script>
    new Vue({
        el: '#content',
        data() {
            return {
                form: {
                    cate_id: '',
                    name: '',
                    key: '',
                    sort: 0,
                    status: 1,
                    type: 'text',
                    value: '',
                    options: [{ key: '', name: '' }],
                    desc:''
                },
                cate_list: JSON.parse('{$cate_list|json_encode|raw}')
            }
        },
        methods: {

            options_add() {
                this.form.options.push({ key: '', name: '' });
            },
            options_del(k) {
                Vue.delete(this.form.options, k)
            }
        }
    })
</script>
{/block}